import { t } from 'i18next'
import MeetingHeader from '@/components/MeetingHeader'
import { CardListWrap, ExpansionIcon, NotExpansionIcon, Wrap } from './style'
import useInit from '@/hooks/useInit'
import WebRecommendBrowser from '@/components/WebRecommendBrowser'
import ScheduleTab from '@/components/ScheduleTab'
import { CardNavProps, MeetingEntity } from './interface'
import { AppointmentCard } from './MeetingCard/AppointmentCard'
import { BeBeginHeldCard } from './MeetingCard/BeBeginHeldCard'
import ShareModal from '@/components/ShareModal'
import { useStore as useMeetingScheduleStore } from './store'
import shallow from 'zustand/shallow'
import { Modal } from '@kedacom/react-next'
import { NotParticipateInCard } from './MeetingCard/NotParticipateInCard'
import { AuditCard } from './MeetingCard/AuditCard'
import ConflictDialog from './MeetingCard/components/ConflictDialog'
import { useEffect, useMemo, useRef, useState } from 'react'
import { Message } from '@kedacom/react-next'

import { useGlobalStore } from '@/store/global'
import { fetchKisCookie } from '@/api/global'

const App = () => {
	useInit()
	/**加载模态框*/
	const loadMaskRef = useRef<any>(null)

	/**无会议提示语 */
	const [msg, setMsg] = useState('')
	/*
	获得store的数据
	*/
	const {
		update,
		AjaxFetchAppointmentMeetingList,
		appointment_list,
		AjaxFetchBeBeginHeldMeetingList,
		AjaxFetchNotParticipateMeetingList,
		AjaxFetchAuditMeetingList,
		audited_list,
		not_participate_list,
		beBegin_held_list,
		is_show_beBegin_held,
		is_show_appointment,
		beBegin_held_msg,
		appointment_msg,
		handleSeeAll,
		appointment_list_total,
		is_show_audited,
		audited_msg,
		is_show_not_participate,
		not_participate_msg,
		is_show_conflict_meeting_modal,
	} = useMeetingScheduleStore(
		(state) => ({
			update: state.update,
			/*
			beBegin_held_list 正在召开的会议列表
			*/
			beBegin_held_list: state.beBegin_held_list,
			/*
			is_show_beBegin_held 是否展示正在召开的会议
			*/
			is_show_beBegin_held: state.is_show_beBegin_held,
			/*
			beBegin_held_msg 正在召开会议展示标题
			*/
			beBegin_held_msg: state.beBegin_held_msg,
			/*
			appointment_list  预约的会议列表
			*/
			appointment_list: state.appointment_list,
			/*
			is_show_appointment  是否展示预约会议
			*/
			is_show_appointment: state.is_show_appointment,
			/*
			appointment_msg  预约的会议展示标题
			*/
			appointment_msg: state.appointment_msg,
			/*
			handleSeeAll 预约会议查看全部
			*/
			handleSeeAll: state.handleSeeAll,
			/*
			isShowTelephoneMembership  控制电话弹框显示
			*/
			isShowTelephoneMembership: state.isShowTelephoneMembership,
			/*
			isShowParticipanteType 参会方式的弹框显示 
			*/
			isShowParticipanteType: state.isShowParticipanteType,
			/*
			appointment_list_total  接口返回预约会议的总数量
			*/
			appointment_list_total: state.appointment_list_total,
			/*
			not_participate_list  不参加的会议列表
			*/
			not_participate_list: state.not_participate_list,
			/*
			audited_list 
			*/
			audited_list: state.audited_list,
			/*
			is_show_audited 
			*/
			is_show_audited: state.is_show_audited,
			/*
			audited_msg 
			*/
			audited_msg: state.audited_msg,
			/*
			is_show_not_participate  是否展示不参加的会议
			*/
			is_show_not_participate: state.is_show_not_participate,
			/*
			not_participate_msg  不参加会议的标题字段
			*/
			not_participate_msg: state.not_participate_msg,
			/*
			is_show_conflict_meeting_modal  是否展示冲突会议模态框
			*/
			is_show_conflict_meeting_modal: state.is_show_conflict_meeting_modal,
			/*
			beBegin_held_ajax_finish 正在召开会议结束
			*/
			beBegin_held_ajax_finish: state.beBegin_held_ajax_finish,
			/*
			appointment_ajax_finish 预约会议请求结束
			*/
			appointment_ajax_finish: state.appointment_ajax_finish,
			/*
			
			*/
			audited_ajax_finish: state.audited_ajax_finish,
			/*
			not_participate_ajax_finish 不参加会议请求结束
			*/
			not_participate_ajax_finish: state.not_participate_ajax_finish,
			/*
			AjaxFetchBeBeginHeldMeetingList  获取正在召开的会议
			(loadMaskRef?: React.MutableRefObject<any>) => void
			*/
			AjaxFetchBeBeginHeldMeetingList: state.AjaxFetchBeBeginHeldMeetingList,
			/*
			AjaxFetchAppointmentMeetingList 获取预约的会议
			(loadMaskRef?: React.MutableRefObject<any>) => void
			*/
			AjaxFetchAppointmentMeetingList: state.AjaxFetchAppointmentMeetingList,
			/*
			AjaxFetchAuditMeetingList  获取不参加的会议
			(loadMaskRef?: React.MutableRefObject<any>) => void
			*/
			AjaxFetchAuditMeetingList: state.AjaxFetchAuditMeetingList,
			/*
			AjaxFetchNotParticipateMeetingList 获取不参加的会议
			(loadMaskRef?: React.MutableRefObject<any>) => void
			*/
			AjaxFetchNotParticipateMeetingList: state.AjaxFetchNotParticipateMeetingList,
		}),
		shallow
	)
	/*
	_flag_not_participate 不参加的会议

	useMemo 计算属性
	*/
	const _flag_not_participate = useMemo(() => not_participate_list.length > 0, [not_participate_list])
	/*
	_flag_appointment 预约的会议

	useMemo 计算属性
	*/
	const _flag_appointment = useMemo(() => appointment_list.length > 0, [appointment_list])
	/*
	_flag_audited_list 审批的会议

	useMemo 计算属性
	*/
	const _flag_audited_list = useMemo(() => audited_list.length > 0, [audited_list])
	/*
	_flag_beBegin_held 正在召开的会议

	useMemo 计算属性
	*/
	const _flag_beBegin_held = useMemo(() => beBegin_held_list.length > 0, [beBegin_held_list])
	/*
	_flag_no_meeting 无会议展示

	useMemo 计算属性
	*/
	const _flag_no_meeting = useMemo(
		() =>
			beBegin_held_list.length === 0 &&
			not_participate_list.length === 0 &&
			appointment_list.length === 0 &&
			audited_list.length === 0,
		[not_participate_list, beBegin_held_list, appointment_list, audited_list]
	)

	const { user, serverInfo, userLoaded } = useGlobalStore(
		(state) => ({
			user: state.user,
			serverInfo: state.serverInfo,
			userLoaded: state.userLoaded,
		}),
		shallow
	)
	useEffect(() => {
		if (serverInfo?.enable_kis && user?.enable_kis) {
			fetchKisCookie()
		}
	}, [serverInfo, user])
	/*
	useEffect/userLoaded 为了区别请求ok还是session缓存
	*/
	useEffect(() => {
		if (userLoaded) {
			if (user?.enable_meeting) {
				setMsg(t('您尚未收到任何会议邀请，请点击右上角的 “创建会议” 按钮开始开会吧。'))
			} else {
				setMsg(t('您不具备创会权限，请等待接受会议邀请。'))
			}

			loadMaskRef.current = Message.loading(t('正在加载会议列表，请稍候……'))
			AjaxFetchBeBeginHeldMeetingList(loadMaskRef)
			AjaxFetchAppointmentMeetingList()
			AjaxFetchNotParticipateMeetingList()
			AjaxFetchAuditMeetingList()
		}
	}, [userLoaded])

	/*
	export interface CardNavProps {
		/**是否展示 
		is_show: boolean
		/**更改show 
		is_show_action: () => void
		/**展示的文章标题 
		title: string
		/**是否展示更多 默认为false（预约会议展示  并且预约会议的数量需要大于10) 
		is_more?: boolean
	}
	*/
	const CardNav = (_props: CardNavProps) => {
		/*
		is_more?: boolean
		is_more 默认false
		*/
		const { is_show, is_show_action, title = '', is_more = false } = _props
		return (
			<div className="card_nav_title">
				<>
					{is_show ? (
						<ExpansionIcon onClick={is_show_action} className="node_btn"></ExpansionIcon>
					) : (
						<NotExpansionIcon onClick={is_show_action} className="node_btn"></NotExpansionIcon>
					)}
					<span>
						<span>{title}</span>
						{is_more && (
							<span onClick={handleSeeAll} className="see_all_meeting">
								{t('查看全部')}
							</span>
						)}
					</span>
				</>
			</div>
		)
	}
	return (
		<>
			<WebRecommendBrowser />
			{/* 
			header
			tab切换 会议日程、会场管理、虚拟会议室、会议模板、个性化设置
			*/}
			<MeetingHeader tabIndex={1} />
			{/* 
			tab切换 列表、会场管理、历史会议
			*/}
			<ScheduleTab tabIndex={1} />
			<Wrap>
				<div className="auto">
					{/* 无会议展示 */}
					{_flag_no_meeting && <div className="no_meeting">{msg}</div>}
					{/*正在召开的会议*/}
					{_flag_beBegin_held && (
						<>
							{CardNav({
								is_show: is_show_beBegin_held,
								/*
								is_show_action 作用是是否展示下面的  CardListWrap  起到收起展开的作用
								*/
								is_show_action: () => {
									update({ is_show_beBegin_held: !is_show_beBegin_held })
								},
								title: beBegin_held_msg,
								is_more: false,
							})}
							{is_show_beBegin_held && (
								<CardListWrap className="meeting-schedule">
									{beBegin_held_list.map((meeting: MeetingEntity, index: number) => {
										return (
											<BeBeginHeldCard
												key={index}
												entity={meeting}
												orderArr={[index, beBegin_held_list.length]}
											></BeBeginHeldCard>
										)
									})}
								</CardListWrap>
							)}
						</>
					)}
					{/*预约的会议*/}
					{_flag_appointment && (
						<>
							{/* 
							CardNav  
							*/}
							{CardNav({
								is_show: is_show_appointment,
								is_show_action: () => {
									update({ is_show_appointment: !is_show_appointment })
								},
								title: appointment_msg,
								is_more: appointment_list_total > 10,
							})}
							{is_show_appointment && (
								<CardListWrap className="meeting-schedule">
									{appointment_list.map((meeting: MeetingEntity, index: number) => {
										return (
											<AppointmentCard
												key={index}
												entity={meeting}
												orderArr={[index, appointment_list.length]}
											></AppointmentCard>
										)
									})}
								</CardListWrap>
							)}
						</>
					)}
					{/*
						审批的会议
						当前用户需要被审批的会议以及审批不通过的会议
					*/}
					{_flag_audited_list && (
						<>
							{CardNav({
								is_show: is_show_audited,
								is_show_action: () => {
									update({ is_show_audited: !is_show_audited })
								},
								title: audited_msg,
							})}
							{is_show_audited && (
								<CardListWrap className="meeting-schedule">
									{audited_list.map((meeting: MeetingEntity, index: number) => {
										return (
											<AuditCard
												key={index}
												entity={meeting}
												orderArr={[index, audited_list.length]}
											></AuditCard>
										)
									})}
								</CardListWrap>
							)}
						</>
					)}
					{/* 不参加的会议 */}
					{_flag_not_participate && (
						<>
							{CardNav({
								is_show: is_show_not_participate,
								is_show_action: () => {
									update({ is_show_not_participate: !is_show_not_participate })
								},
								title: not_participate_msg,
							})}
							{is_show_not_participate && (
								<CardListWrap className="meeting-schedule">
									{not_participate_list.map((meeting: MeetingEntity, index: number) => {
										return (
											<NotParticipateInCard
												key={index}
												entity={meeting}
												orderArr={[index, not_participate_list.length]}
											></NotParticipateInCard>
										)
									})}
								</CardListWrap>
							)}
						</>
					)}
					<ShareModal />
					<Modal
						open={is_show_conflict_meeting_modal}
						title={t('冲突的会议')}
						width={600}
						height={500}
						cancelText={false}
						okText={false}
						onOk={() => {}}
						onCancel={() => {
							update({ is_show_conflict_meeting_modal: false })
						}}
					>
						<ConflictDialog></ConflictDialog>
					</Modal>
				</div>
			</Wrap>
		</>
	)
}
export default App
